<template>
  <div class="chart-scrollbar layout-padding">
    <div class="chart-warp layout-padding-auto layout-padding-view">
      <div class="chart-warp-top">
        <ChartHead/>
      </div>
      <div class="chart-warp-bottom">
        <!-- 左边 -->
        <div class="big-data-down-left" style="display: none">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">天气预报</div>
              <div class="flex-content">
                <div class="sky">
                  <SvgIcon name="ele-Sunny" class="sky-left"/>
                  <div class="sky-center">
                    <div class="mb2">
                      <span>多云转晴</span>
                      <span>东南风</span>
                      <span class="span ml5">良</span>
                    </div>
                  </div>
                  <div class="sky-right">
                    <span>25</span>
                    <span>°C</span>
                  </div>
                </div>
                <div class="sky-dd">
                  <div class="sky-dl" v-for="(v, k) in state.skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
                    <div>{{ v.v1 }}</div>
                    <div v-if="v.type === 'title'">{{ v.v2 }}</div>
                    <div v-else>
                      <SvgIcon :name="v.v2"/>
                    </div>
                    <div>{{ v.v3 }}</div>
                    <div class="tip">{{ v.v5 }}</div>
                    <div>{{ v.v7 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">当前设备状态</div>
              <div class="flex-content flex-content-overflow">
                <div class="d-states">
                  <div class="d-states-item">
                    <SvgIcon name="ele-Odometer" class="i-bg1"/>
                    <div class="d-states-flex">
                      <div class="d-states-item-label">园区设备数</div>
                      <div class="d-states-item-value">99</div>
                    </div>
                  </div>
                  <div class="d-states-item">
                    <SvgIcon name="ele-FirstAidKit" class="i-bg2"/>
                    <div class="d-states-flex">
                      <div class="d-states-item-label">预警设备数</div>
                      <div class="d-states-item-value">10</div>
                    </div>
                  </div>
                  <div class="d-states-item">
                    <SvgIcon name="ele-VideoPlay" class="i-bg3"/>
                    <div class="d-states-flex">
                      <div class="d-states-item-label">运行设备数</div>
                      <div class="d-states-item-value">20</div>
                    </div>
                  </div>
                </div>
                <div class="d-btn">
                  <div class="d-btn-item" v-for="(v, k) in state.dBtnList" :key="k">
                    <i class="d-btn-item-left el-icon-money"></i>
                    <div class="d-btn-item-center">
                      <div>{{ v.v2 }}|{{ v.v3 }}</div>
                    </div>
                    <div class="d-btn-item-eight">{{ v.v4 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <div class="flex-title">近30天预警总数</div>
              <div class="flex-content">
                <div style="height: 100%" ref="chartsWarningRef"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间 -->
        <div  style="width: 100%;height: 1800px">
          <div class="big-data-down-center-one" style="display: none">
            <div class="big-data-down-center-one-content">
              <div style="height: 100%" ref="chartsCenterOneRef"></div>
            </div>
          </div>
          <div style="padding: 10px">
            <div  style="height: 600px;overflow-y: scroll;">
              <el-row :gutter="20" style="line-height: 3.5">
                <el-col :span="6">
                  <label style="color: black;font-size: 10px;margin-right:5px">开始时间</label>
                  <el-input v-model="state.startDate" size="mini" placeholder="开始时间" type="datetime-local"
                            style="width: 100px"/>
                </el-col>
                <el-col :span="6">
                  <label style="color: black;font-size: 10px;margin-right:5px">结束时间</label>
                  <el-input v-model="state.endDate" size="mini" placeholder="结束时间" type="datetime-local"
                            style="width: 100px"/>
                </el-col>
                <el-col :span="6">
                  <label style="color: black;font-size: 10px;margin-right:5px">查询企业</label>
                  <el-select
                      @change="getdev_info($event)"
                      size="mini" v-model="state.company" filterable placeholder="请选择">
                    <el-option
                        v-for="item in state.optionscompany"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <label style="color: black;font-size: 10px;margin-right:5px">查询设备</label>
                  <el-select
                      @change="getdata_info($event)"
                      size="mini" v-model="state.device" filterable placeholder="请选择">
                    <el-option
                        v-for="item in state.optionsdevice"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-button
                    size="mini"
                    type="danger"
                    @click="getdev_info(state.company)">查询15min
                </el-button>
                <el-button
                    size="mini"
                    type="success"
                    @click="getdev_info_5min(state.company)">查询5min
                </el-button>
                <el-button
                    size="mini"
                    type="warn"
                    @click="canzhi(state.company)">产治一体
                </el-button>
                <div style="line-height: 2.5;float: left">
                  <el-tag v-if="state.devlist[0]" style="font-size: 10px;">
                    <label style="color: black;font-size: 10px;margin-right:5px">设备码列表：</label>
                    {{ state.devlist }}
                  </el-tag>
                  <el-tag type="warning" v-if="state.empguid" style="margin-left:10px;font-size: 10px;">
                    <label style="color: black;font-size: 10px;margin-right:5px">GUID：</label>
                    {{ state.empguid }}
                  </el-tag>
                </div>
              </el-row>

              <el-tabs v-model="state.activename" @click="handleClick">
                <el-tab-pane label="五分钟数据集" name="first">
                  <div style="width: 100%;min-height: 1400px;display:block;">
                    <div style="width: 100%;height: 85%">
                      <div>
                        <div >
                          <span>5min增长 间接用电</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRefindirect"></div>

                        <div class="flex-title">
                          <span>5min增长 总电</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRefsummation"></div>

                        <div class="flex-title">
                          <span>5min增长 产污</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRefproduction"></div>

                        <div class="flex-title">
                          <span>5min增长 治污</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRefpollution_control"></div>

                        <div class="flex-title">
                          <span>5min增长 产治一体</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRefall_in_one"></div>

                        <div class="flex-title">
                          <span>5min增长 (含模型)</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRef3"></div>

                        <div class="flex-title">
                          <span>15min增长 (含模型)</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 150px ;width:85%" ref="chartsMonitorRef4"></div>


                        <div v-loading="state.loading">
                          <div class="flex-title">
                            <span>{{ state.chanzhi }}</span>
                            <span class="flex-title-small"></span>
                          </div>
                          <div style="height: 150px ;width:85%" ref="chartsMonitorRef"></div>
                          <div class="flex-title">
                            <span>治污设施</span>
                            <span class="flex-title-small"></span>
                          </div>
                          <div style="height: 80px ;width:85%" ref="chartsMonitorRef1"></div>
                        </div>


                        <div class="flex-title">
                          <span>异常设备情况</span>
                          <span class="flex-title-small"></span>
                        </div>
                        <div style="height: 380px ;width:85%" ref="chartsMonitorRefyichang"></div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="日常报警监控" name="second">

                </el-tab-pane>
                <el-tab-pane label="原始供应商 5min" name="third"></el-tab-pane>
                <el-tab-pane label="应急报警调试" name="five">
                  <label style="font-family: '等线 Light'">当前应急报警状态：</label>
                  <el-tag type="error">{{ state.emengency_state }}</el-tag>
                  <br>
                  <hr>
                  <br>
                  <label style="font-family: '等线 Light'">报警测试 </label>
                  <el-select
                      @change="get_emergency_info($event)"
                      size="mini"
                      v-model="state.select_emgency"
                      fiterable pladceholder="选择测试案例"
                  >
                    <el-option
                        v-for="item in state.emengencyoptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                  </el-select>&nbsp;
                  <el-button
                      @click="start_emgency"
                      v-if="state.select_emgency">单元测试
                  </el-button>
                  <br>
                  <label style="font-family: '等线 Light'">测试日志：</label>
                  <br>
                  <el-table
                      :data="state.tableData"
                      style="width: 100%"
                      :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column
                        prop="ent_id"
                        label="公司ID"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="ent_name"
                        label="报警公司"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="warn_time"
                        label="开始时间"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="county_name"
                        label="所在区"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="measure"
                        label="限产措施"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="delay_time"
                        label="报警时长（min)"
                    >
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="异常值设备情况" name="six">
                  <div style="width: 1000px;min-height: 1400px;display:block;">
                    当前异常设备的设备数数：{{ state.abnormal_count }}

                    <p>异常设备的公司列表</p>
                    <el-table
                        :data="state.abnormal_tableData"
                        style="width: 100%"
                    >
                      <el-table-column
                          type="index"
                          label="Index"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="id"
                          label="公司ID"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="ent_name"
                          label="公司名"
                          sortable
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="dev_id"
                          label="设备ID"
                          sortable
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="dev_name"
                          label="设备名"
                          sortable
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="dev_code"
                          label="设备码"
                          sortable
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="status"
                          label="异常值设备情况"
                          width="100"
                          filter-placement="bottom-end">
                      </el-table-column>

                    </el-table>
                  </div>
                </el-tab-pane>
              </el-tabs>

            </div>
          </div>
        </div>



      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="chartIndex">
import {defineAsyncComponent, reactive, onMounted, watch, nextTick, onActivated, ref} from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {storeToRefs} from 'pinia';
import {useTagsViewRoutes} from '/@/stores/tagsViewRoutes';
import {skyList, dBtnList, chartData4List} from '/@/views/chart/chart';
import axios from 'axios'

// 引入组件
const ChartHead = defineAsyncComponent(() => import('/@/views/chart/head.vue'));

// 定义变量内容
const chartsCenterOneRef = ref();
const chartsSevenDaysRef = ref();
const chartsWarningRef = ref();
const chartsMonitorRef = ref();
const chartsMonitorRef1 = ref();
const chartsMonitorRefindirect = ref();
const chartsMonitorRefsummation = ref();
const chartsMonitorRefproduction = ref();
const chartsMonitorRefpollution_control = ref();
const chartsMonitorRefall_in_one = ref();
const chartsMonitorRef3 = ref();
const chartsMonitorRef4 = ref();
const chartsMonitorRefyichang = ref();
const chartsInvestmentRef = ref();

const storesTagsViewRoutes = useTagsViewRoutes();
const {isTagsViewCurrenFull} = storeToRefs(storesTagsViewRoutes);
let now = new Date();

// 设置开始时间为五分钟前
let fiveMinAgo = new Date(now.getTime() - (24 * 12 * 5 * 60 * 1000));
const state = reactive({
  loading: true,
  chanzhi: "产污设施",
  optionscompany: [],
  optionsdevice: [],
  activename: "first",
  //设计一个结构体  开始时间  结束时间  企业 设备名
  startDate: formatDateTime(fiveMinAgo),
  endDate: formatDateTime(now),
  company: '北京澳林通田汽车销售服务有限公司',
  production_list_data_dev_name_list: [],
  production_list_data_dev_values_list: [],
  pollution_control_list_data_dev_name_list: [],
  pollution_control_list_data_dev_values_list: [],
  pollution_control_list_data_dev_name_5list: [],
  pollution_control_list_data_dev_values_5list: [],
  pollution_control_list_data_dev_name_5listpre: [],
  pollution_control_list_data_dev_values_5listpre: [],
  pollution_control_list_data_dev_values_15listpre: [],
  production_list_data_dev_name_list_chanzhi: [],
  production_list_data_dev_name_5list: [],
  production_list_data_dev_values_5list: [],
  summation_list_data_dev_name_5list: [],
  summation_list_data_dev_values_5list: [],
  all_in_one_list_data_dev_name_5list: [],
  all_in_one_list_data_dev_values_5list: [],
  indirect_list_data_dev_name_5list: [],
  indirect_list_data_dev_values_5list: [],
  pollution_control_list_data_dev_values_5list_chanzhi: [],
  device: '',
  devlist: [],
  time_list: [],
  time_list5min: [],
  time_list_15min: [],
  // guid信息
  empguid: '',
  skyList,
  dBtnList,
  chartData4List,
  myCharts: [] as EmptyArrayType,
  emengency_state: "",
  select_emgency: "",
  emengencyoptions: [],
  baseurl: "http://106.53.97.117",
  empselect_emgency: "",
  empselect_emgency_log: "",
  tableData: [{
    name: '',
    delay_time: '',
  }],
  abnormal_tableData: [{
    id: "",
    ent_name: '',
    dev_name: '',
    dev_id: '',
    dev_code: '',
    status: '',
  }],
  abnormal_count: 0,
});

function formatDateTime(date) {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear(),
      hour = '' + d.getHours(),
      minute = '00';

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;
  if (hour.length < 2)
    hour = '0' + hour;
  if (minute.length < 2)
    minute = '0' + minute;

  return [year, month, day].join('-') + "T" + [hour, minute].join(':');
}

const handleClick = (e: any) => {
  console.log(e)
}

//请求公司数据
async function fetchData() {
  try {
    let sql = `select eei.id,eei.ent_name from elec_enterprise_info eei left join
elec_dev_info edi on edi.ent_id = eei.id
where edi.dev_code is not null
GROUP BY  eei.id`
    const response = await axios.post(`http://106.53.97.117:2088/ups`, {
      sql: sql
    }); // 替换为你的URL
    const data = response.data.data;

    // 遍历每一个数据项
    for (const item of data) {
      state.optionscompany.push({
        value: item.id,
        label: item.ent_name
      });
    }
  } catch (error) {
    console.error(error);
  }
}

//日期第二种格式
function convertDateTime(datetimeStr) {
  // 创建 Date 对象
  let date = new Date(datetimeStr);

  // 获取年、月、日、小时、分钟和秒
  let year = date.getFullYear();
  let month = '' + (date.getMonth() + 1);
  let day = '' + date.getDate();
  let hour = '' + date.getHours();
  let minute = '' + date.getMinutes();
  let second = '00'; // 根据你的需求固定为 '00'

  // 如果月份、日期、小时或分钟为个位数则在前面添加0
  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  if (hour.length < 2) hour = '0' + hour;
  if (minute.length < 2) minute = '0' + minute;

  return [year, month, day].join('-') + " " + [hour, minute, second].join(':');
}

//查询5min数据
const getdev_info_5min = async (e: any) => {

  state.pollution_control_list_data_dev_name_5list = []
  state.pollution_control_list_data_dev_values_5list = []
  state.pollution_control_list_data_dev_name_5listpre = []
  state.pollution_control_list_data_dev_values_5listpre = []
  state.pollution_control_list_data_dev_values_15listpre = [];
  let formattedStartDate = convertDateTime(state.startDate);
  let formattedEndDate = convertDateTime(state.endDate);
  axios.get(`http://106.53.97.117:3060/elec5min/5minsql?devlist=${state.devlist}&start_time=${formattedStartDate}&end_time=${formattedEndDate}`).then(res => {
    console.log(res.data.result.time_list_5min, "asdsdadsf")
    state.time_list5min = res.data.result.time_list_5min
    // state.time_list_15min = res.data.result.time_list
    for (let i = 0; i < res.data.result.indirect_list.length; i++) {
      state.indirect_list_data_dev_name_5list.push(res.data.result.indirect_list[i].dev_name);
      state.indirect_list_data_dev_values_5list.push(res.data.result.indirect_list[i].values_5min.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_name_5listpre.push(res.data.result.indirect_list[i].dev_name);
      // state.pollution_control_list_data_dev_values_5listpre.push(res.data.result.indirect_list[i].valuespre.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_values_15listpre.push(res.data.result.indirect_list[i].values_15min.map(value => value === '-99' ? null : value));

    }
    for (let i = 0; i < res.data.result.production_list.length; i++) {
      state.production_list_data_dev_name_5list.push(res.data.result.production_list[i].dev_name);
      state.production_list_data_dev_values_5list.push(res.data.result.production_list[i].values_5min.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_name_5listpre.push(res.data.result.indirect_list[i].dev_name);
      // state.pollution_control_list_data_dev_values_5listpre.push(res.data.result.indirect_list[i].valuespre.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_values_15listpre.push(res.data.result.indirect_list[i].values_15min.map(value => value === '-99' ? null : value));

    }
    for (let i = 0; i < res.data.result.summation_list.length; i++) {
      state.summation_list_data_dev_name_5list.push(res.data.result.summation_list[i].dev_name);
      state.summation_list_data_dev_values_5list.push(res.data.result.summation_list[i].values_5min.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_name_5listpre.push(res.data.result.indirect_list[i].dev_name);
      // state.pollution_control_list_data_dev_values_5listpre.push(res.data.result.indirect_list[i].valuespre.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_values_15listpre.push(res.data.result.indirect_list[i].values_15min.map(value => value === '-99' ? null : value));

    }
    for (let i = 0; i < res.data.result.pollution_control_list.length; i++) {
      state.pollution_control_list_data_dev_name_5list.push(res.data.result.pollution_control_list[i].dev_name);
      state.pollution_control_list_data_dev_values_5list.push(res.data.result.pollution_control_list[i].values_5min.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_name_5listpre.push(res.data.result.indirect_list[i].dev_name);
      // state.pollution_control_list_data_dev_values_5listpre.push(res.data.result.indirect_list[i].valuespre.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_values_15listpre.push(res.data.result.indirect_list[i].values_15min.map(value => value === '-99' ? null : value));

    }
    for (let i = 0; i < res.data.result.all_in_one_list.length; i++) {
      state.all_in_one_list_data_dev_name_5list.push(res.data.result.all_in_one_list[i].dev_name);
      state.all_in_one_list_data_dev_values_5list.push(res.data.result.all_in_one_list[i].values_5min.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_name_5listpre.push(res.data.result.indirect_list[i].dev_name);
      // state.pollution_control_list_data_dev_values_5listpre.push(res.data.result.indirect_list[i].valuespre.map(value => value === '-99' ? null : value));
      // state.pollution_control_list_data_dev_values_15listpre.push(res.data.result.indirect_list[i].values_15min.map(value => value === '-99' ? null : value));

    }
    updateChartDataindirect(state.time_list5min, state.indirect_list_data_dev_name_5list, state.indirect_list_data_dev_values_5list);
    updateChartDataproduction(state.time_list5min, state.production_list_data_dev_name_5list, state.production_list_data_dev_values_5list);
    updateChartDatasummation(state.time_list5min, state.summation_list_data_dev_name_5list, state.summation_list_data_dev_values_5list);
    updateChartDatapollution_control(state.time_list5min, state.pollution_control_list_data_dev_name_5list, state.pollution_control_list_data_dev_values_5list);
    updateChartDataall_in_one(state.time_list5min, state.all_in_one_list_data_dev_name_5list, state.all_in_one_list_data_dev_values_5list);
    //加载预测数据
    // updateChartData3(state.time_list5min, state.pollution_control_list_data_dev_name_5listpre, state.pollution_control_list_data_dev_values_5listpre);
    //  15min数据更新
    // updateChartData4(state.time_list_15min, state.pollution_control_list_data_dev_name_5listpre, state.pollution_control_list_data_dev_values_15listpre);

  })
}
const updateChartDataindirect = (timeList, devNames, devValues) => {
  let chart2 = echarts.getInstanceByDom(chartsMonitorRefindirect.value);
  if (!chart2) {
    chart2 = echarts.init(chartsMonitorRefindirect.value);
  }
  let option2 = chart2.getOption(); // 获取当前option
// 添加 legend 配置
  option2.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option2.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option2.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option2.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart2.setOption(option2, true);
};
const updateChartDataproduction = (timeList, devNames, devValues) => {
  let chart2 = echarts.getInstanceByDom(chartsMonitorRefproduction.value);
  if (!chart2) {
    chart2 = echarts.init(chartsMonitorRefproduction.value);
  }
  let option2 = chart2.getOption(); // 获取当前option
// 添加 legend 配置
  option2.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option2.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option2.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option2.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart2.setOption(option2, true);
};
const updateChartDatasummation = (timeList, devNames, devValues) => {
  let chart2 = echarts.getInstanceByDom(chartsMonitorRefsummation.value);
  if (!chart2) {
    chart2 = echarts.init(chartsMonitorRefsummation.value);
  }
  let option2 = chart2.getOption(); // 获取当前option
// 添加 legend 配置
  option2.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option2.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option2.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option2.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart2.setOption(option2, true);
};
const updateChartDatapollution_control = (timeList, devNames, devValues) => {
  let chart2 = echarts.getInstanceByDom(chartsMonitorRefpollution_control.value);
  if (!chart2) {
    chart2 = echarts.init(chartsMonitorRefpollution_control.value);
  }
  let option2 = chart2.getOption(); // 获取当前option
// 添加 legend 配置
  option2.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option2.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option2.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option2.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart2.setOption(option2, true);
};
const updateChartDataall_in_one = (timeList, devNames, devValues) => {
  let chart2 = echarts.getInstanceByDom(chartsMonitorRefall_in_one.value);
  if (!chart2) {
    chart2 = echarts.init(chartsMonitorRefall_in_one.value);
  }
  let option2 = chart2.getOption(); // 获取当前option
// 添加 legend 配置
  option2.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option2.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option2.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option2.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart2.setOption(option2, true);
};

const initChartsMonitorall5min = () => {
  const myChartindirect = echarts.init(chartsMonitorRefindirect.value);
  const myChartproduction = echarts.init(chartsMonitorRefproduction.value);
  const myChartsummation = echarts.init(chartsMonitorRefsummation.value);
  const myChartpollution_control = echarts.init(chartsMonitorRefpollution_control.value);
  const myChartall_in_one = echarts.init(chartsMonitorRefall_in_one.value);
  const option = {
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChartproduction.setOption(option);
  myChartsummation.setOption(option);
  myChartpollution_control.setOption(option);
  myChartall_in_one.setOption(option);
  myChartindirect.setOption(option);
  state.myCharts.push(myChartproduction);
  state.myCharts.push(myChartsummation);
  state.myCharts.push(myChartpollution_control);
  state.myCharts.push(myChartall_in_one);
  state.myCharts.push(myChartindirect);
};
//    请求设备数据
const getdev_info = async (e: any) => {
  console.log(e)
  state.devlist = [];
  state.optionsdevice = [];
  //在表里渲染展示出来 产污设施
  state.production_list_data_dev_name_list = []
  state.production_list_data_dev_values_list = []
  state.indirect_list_data_dev_name_5list = []
  state.indirect_list_data_dev_values_5list = []
  state.summation_list_data_dev_name_5list = []
  state.summation_list_data_dev_values_5list = []
  state.pollution_control_list_data_dev_name_5list = []
  state.pollution_control_list_data_dev_values_list = []
  state.all_in_one_list_data_dev_name_5list = []
  state.all_in_one_list_data_dev_values_5list = []



  state.pollution_control_list_data_dev_values_15listpre = [];

  console.log(state.devlist)
  try {
    const respone = await axios.get(`http://106.53.97.117:2088/sql?sql=select%20*%20from%20elec_dev_info where ent_id='${e}'`)
    const data = respone.data.data;
    console.log(data, "hhhh");
    // 遍历每一个数据项
    for (const item of data) {
      state.devlist.push(item.dev_code)
      state.optionsdevice.push({
        value: item.id,
        label: item.dev_name,
      });
    }

    //  获取对应的15分钟的可视化数据
    getdev_info_5min(state.company);
    let formattedStartDate = convertDateTime(state.startDate);
    let formattedEndDate = convertDateTime(state.endDate);
    let url = `https://electricity-api-service-pre.airqualitychina.cn/v1/realtime-monitor?project_id=225&start_time=${formattedStartDate}&end_time=${formattedEndDate}&data_type_id=8&time_type=1&get_warn=1&dev_code_list=${state.devlist}`
    const respone2 = await axios.get(url)
    for (let i = 0; i < respone2.data.result.indirect_list.length; i++) {
      state.production_list_data_dev_name_list_chanzhi.push(respone2.data.result.indirect_list[i].dev_name);
      state.pollution_control_list_data_dev_values_5list_chanzhi.push(respone2.data.result.indirect_list[i].values.map(value => value === '-99' ? null : value));
    }
    //获取多个产污数据 更新曲线
    //和获取的产污设备名列表
    //获取对应的产污设备的时序数据
    //获取对应的横向时间轴
    for (let i = 0; i < respone2.data.result.production_list.length; i++) {
      state.pollution_control_list_data_dev_name_5list.push(respone2.data.result.production_list[i].dev_name);
      state.pollution_control_list_data_dev_values_5list.push(respone2.data.result.production_list[i].values.map(value => value === '-99' ? null : value));
      state.pollution_control_list_data_dev_name_5listpre.push(respone2.data.result.production_list[i].dev_name);
      state.pollution_control_list_data_dev_values_5listpre.push(respone2.data.result.production_list[i].valuespre.map(value => value === '-99' ? null : value));
      state.pollution_control_list_data_dev_values_15listpre.push(respone2.data.result.production_list[i].values_15min.map(value => value === '-99' ? null : value));
    }
    console.log(state.production_list_data_dev_values_list, "aaa")

    state.time_list = respone2.data.result.time_list_5min
    //更新渲染图表
    //  15min数据更新
    updateChartData4(state.time_list_15min, state.pollution_control_list_data_dev_name_5listpre, state.pollution_control_list_data_dev_values_15listpre);

// 使用这个函数更新数据
    updateChartData(state.time_list, state.production_list_data_dev_name_list, state.production_list_data_dev_values_list);
    for (let i = 0; i < respone2.data.result.pollution_control_list.length; i++) {
      state.pollution_control_list_data_dev_name_list.push(respone2.data.result.pollution_control_list[i].dev_name);
      state.pollution_control_list_data_dev_values_list.push(respone2.data.result.pollution_control_list[i].values.map(value => value === '-99' ? null : value));
    }
    state.loading = false
    updateChartData1(state.time_list, state.pollution_control_list_data_dev_name_list, state.pollution_control_list_data_dev_values_list);

  } catch (error) {

  }
}


//产治一体  15min
const canzhi = () => {
  state.chanzhi = "产治一体";
  updateChartData(state.time_list, state.production_list_data_dev_name_list_chanzhi, state.pollution_control_list_data_dev_values_5list_chanzhi);
}

// 更新数据源
// 定义一个颜色数组供多条曲线使用不同颜色

const themes = {
  'A': [
    '#FFD700', '#FFC72C', '#FFB758', '#FFA784', '#FF96B0',
    '#EB85AF', '#D774AE', '#C263AD', '#AD52AC', '#9841AB',
    '#8230AA', '#6C1FA9', '#5618A8', '#4000A7', '#2A00A6', '#1400A5'
  ],
  'B': [
    '#000033', '#000066', '#000099', '#0000CC', '#0000FF',
    '#0033FF', '#0066FF', '#0099FF', '#00CCFF', '#00FFFF',
    '#33CCFF', '#66CCFF', '#99CCFF', '#CCCCFF', '#FFFFFF', '#E0E0E0'
  ],
  'C': [
    '#121d1d', '#494848', '#708090', '#12191d', '#808080',
    '#8b8989', '#453e3e', '#2d1010', '#724747', '#DCDCDC',
    '#453131', '#452424', '#401840', '#2b4155', '#FEFEFE', '#FFFFFF'
  ],
  'D': [
    '#013220', '#fd4141', '#f18a0a', '#06C480', '#08F5A0',
    '#4b4b4b', '#4AFFC1', '#6BFFC2', '#8CFFC3', '#ADFFC4',
    '#CEFFC5', '#EFFFF6', '#FFFFFF', '#E0E0E0', '#C0C0C0', '#A0A0A0'
  ],
  'E': [
    '#000080', '#001999', '#0033B3', '#004DCC', '#0066E6',
    '#0080FF', '#3399FF', '#66B3FF', '#99CCFF', '#CCE6FF',
    '#E0FFFF', '#F2F8FF', '#FFFFFF', '#E0E0E0', '#C0C0C0', '#A0A0A0'
  ],
  'F': [
    '#4B0082', '#810199', '#B31AB1', '#E633CC', '#FF4DE6',
    '#FF66FF', '#FF80FF', '#FF99FF', '#FFB3FF', '#FFCCFF',
    '#FFE6FF', '#FFFFFF', '#E0E0E0', '#C0C0C0', '#A0A0A0', '#808080'
  ]
};

const colors = themes["C"];
const colorsa = themes["D"];


const updateChartData = (timeList, devNames, devValues) => {
  let chart = echarts.getInstanceByDom(chartsMonitorRef.value);
  if (!chart) {
    chart = echarts.init(chartsMonitorRef.value);
  }
  let option = chart.getOption(); // 获取当前option
// 添加 legend 配置
  option.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart.setOption(option, true);
};


const updateChartData1 = (timeList, devNames, devValues) => {
  let chart1 = echarts.getInstanceByDom(chartsMonitorRef1.value);
  if (!chart1) {
    chart1 = echarts.init(chartsMonitorRef1.value);
  }
  let option1 = chart1.getOption(); // 获取当前option
// 添加 legend 配置
  option1.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option1.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option1.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option1.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart1.setOption(option1, true);
};


const updateChartData3 = (timeList, devNames, devValues) => {
  let chart3 = echarts.getInstanceByDom(chartsMonitorRef3.value);
  if (!chart3) {
    chart3 = echarts.init(chartsMonitorRef3.value);
  }
  let option3 = chart3.getOption(); // 获取当前option
// 添加 legend 配置
  option3.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option3.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option3.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option3.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart3.setOption(option3, true);
};


//渲染15分钟的数据图
const updateChartData4 = (timeList, devNames, devValues) => {
  let chart4 = echarts.getInstanceByDom(chartsMonitorRef4.value);
  if (!chart4) {
    chart4 = echarts.init(chartsMonitorRef4.value);
  }
  let option3 = chart4.getOption(); // 获取当前option
// 添加 legend 配置
  option3.legend = {
    data: devNames, // 图例名称，与系列名称相对应
  };

// 添加 toolbox 配置
  option3.toolbox = {
    feature: {
      dataView: {show: true, readOnly: false},
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
    }
  };

// 更新option中的x轴数据
  option3.xAxis[0].data = timeList;

// 按设备名创建对应的系列
  option3.series = devNames.map((name, index) => ({
    name: name,
    type: 'line',
    smooth: true, // 设置曲线平滑
    // connectNulls: true, // 连接空值
    itemStyle: {
      color: colors[index % colors.length], // 从颜色数组中选择颜色
    },
    // 移除areaStyle，因为可能会覆盖线条的颜色设置
    data: devValues[index],
  }));

// 调用setOption方法更新图表
  chart4.setOption(option3, true);
};

//渲染异常全天时刻设备情况可视化
const updateChartDatayichang = () => {
  axios.get("http://106.53.97.117:3060/elec5min/unnomaldev").then(res => {
    let abnormal_devs = res.data.data.abnormal_devs;
    //这个是附带信息 我希望 也在echart里展示出来
    let abnormal_msg = res.data.data.abnormal_msg;
    let all_devs = res.data.data.all_devs;
    let all_work_devs = res.data.data.all_work_devs;
    let monitor_point_time = res.data.data.monitor_point_time;
    let single_word_devs = res.data.data.single_word_devs;
    // 创建一个新的数组，其中每个元素都是 [value, message]
    let abnormal_data = abnormal_devs.map((value, index) => [value, abnormal_msg[index]]);
    let chart3 = echarts.getInstanceByDom(chartsMonitorRefyichang.value);
    if (!chart3) {
      chart3 = echarts.init(chartsMonitorRefyichang.value);
    }
    let option3 = chart3.getOption(); // 获取当前option
    // 添加 legend 配置
    option3.legend = {
      data: ['异常设备', '所有设备', '断点工作设备', '完全正常设备', '无数设备'], // 图例名称，与系列名称相对应
    };
    // 添加 toolbox 配置
    option3.toolbox = {
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    };
    option3.xAxis[0].data = monitor_point_time;
    // 按设备名创建对应的系列
    let no_work_devs = all_devs.map((item, index) => {
      return item - all_work_devs[index] - single_word_devs[index];
    });
    // 创建对应的系列
    option3.series = [
      {
        name: '异常设备',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: colorsa[1],
        },
        data: abnormal_devs,
      }, {
        name: '所有设备',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: colorsa[0],
        },
        data: all_devs,
      },
      {
        name: '断点工作设备',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: colorsa[2],
        },
        data: single_word_devs,
      },
      {
        name: '完全正常设备',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: colorsa[3],
        },
        data: all_work_devs,
      },
      {
        name: '无数设备',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: colorsa[5],
        },
        data: no_work_devs,
      },
    ];

    // 调用setOption方法更新图表
    chart3.setOption(option3, true);
  });
};


//    请求设备具体信息数据
const getdata_info = async (e: any) => {
  try {
    const respone = await axios.get(`http://106.53.97.117:2088/sql?sql=select%20*%20from%20elecdata_basic_info_2%20where devid='${e}' and%20data_type_id%20=8`)
    const data = respone.data.data;
    console.log(data);
    //循环 形成 devlist
    for (const item of data) {
      state.empguid = item.guid;
    }
    // 根据时间 guid 查询  对应的 原供应商数据   阿里云5m数据   15min数据  以及曲线和可视化  情况
    let url = `http://106.53.97.117:2088/sql?sql=select%20*%20from%20elecdata_basic_info_2%20where devid='${e}' and%20data_type_id%20=8`
    const respone1 = await axios.get(url)
    const data1 = respone.data.data;
    console.log(data1)

  } catch (error) {

  }
}


//获取设备异常的公司的数据
const get_problem = () => {
  axios.get("http://106.53.97.117:3060/elec5min/get_abnoaml_enterprise").then(res => {
    state.abnormal_count = res.data.length
    state.abnormal_tableData = res.data.data
    console.log(state.abnormal_tableData, "hhhh")
  })
}

// 初始化中间图表1
const initChartsCenterOne = () => {
  const myChart = echarts.init(chartsCenterOneRef.value);
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {},
    series: [
      {
        type: 'wordCloud',
        sizeRange: [12, 40],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: Math.random() * 20 + 5,
        shape: 'circle',
        width: '100%',
        height: '100%',
        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function () {
            return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
          },
        },
        data: [
          {name: 'vue-next-admin', value: 520},
          {name: 'lyt', value: 520},
          {name: 'next-admin', value: 500},
          {name: '更名', value: 420},
          {name: '智慧农业', value: 520},
          {name: '男神', value: 2.64},
          {name: '好身材', value: 4.03},
          {name: '校草', value: 24.95},
          {name: '酷', value: 4.04},
          {name: '时尚', value: 5.27},
          {name: '阳光活力', value: 5.8},
          {name: '初恋', value: 3.09},
          {name: '英俊潇洒', value: 24.71},
          {name: '霸气', value: 6.33},
          {name: '腼腆', value: 2.55},
          {name: '蠢萌', value: 3.88},
          {name: '青春', value: 8.04},
          {name: '网红', value: 5.87},
          {name: '萌', value: 6.97},
          {name: '认真', value: 2.53},
          {name: '古典', value: 2.49},
          {name: '温柔', value: 3.91},
          {name: '有个性', value: 3.25},
          {name: '可爱', value: 9.93},
          {name: '幽默诙谐', value: 3.65},
        ],
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);
};
// 初始化近7天产品追溯扫码统计
const initChartsSevenDays = () => {
  const myChart = echarts.init(chartsSevenDaysRef.value);
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        data: [12, 32, 11, 34, 90, 23, 21],
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        data: [22, 82, 91, 24, 90, 30, 30],
      },
      {
        name: '视频广告',
        type: 'line',
        stack: '总量',
        data: [50, 32, 18, 14, 90, 30, 50],
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);
};
// 初始化近30天预警总数
const initChartsWarning = () => {
  const myChart = echarts.init(chartsWarningRef.value);
  const option = {
    grid: {
      top: 50,
      right: 20,
      bottom: 30,
      left: 30,
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '面积模式',
        type: 'pie',
        radius: [20, 50],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          {value: 40, name: '监测设备预警'},
          {value: 38, name: '天气预警'},
          {value: 32, name: '任务预警'},
          {value: 30, name: '病虫害预警'},
        ],
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);
};
// 初始化当前设备监测
const initChartsMonitor = () => {
  const myChart = echarts.init(chartsMonitorRef.value);
  myChart.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);
};

const initChartsMonitor1 = () => {
  const myChart1 = echarts.init(chartsMonitorRef1.value);
  myChart1.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChart1.setOption(option);
  state.myCharts.push(myChart1);
};


const initChartsMonitor3 = () => {
  const myChart3 = echarts.init(chartsMonitorRef3.value);
  myChart3.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChart3.setOption(option);
  state.myCharts.push(myChart3);
};

const initChartsMonitor4 = () => {
  const myChart4 = echarts.init(chartsMonitorRef4.value);
  myChart4.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChart4.setOption(option);
  state.myCharts.push(myChart4);
};

const initChartsMonitoryichang = () => {
  const myChart5 = echarts.init(chartsMonitorRefyichang.value);
  myChart5.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color: '#289df5',
          borderColor: '#289df5',
          areaStyle: {
            type: 'default',
            opacity: 0.1,
          },
        },
        data: [],
        type: 'line',
        areaStyle: {},
      },
    ],
  };
  myChart5.setOption(option);
  state.myCharts.push(myChart5);
};
// 初始化近7天投入品记录
const initChartsInvestment = () => {
  const myChart = echarts.init(chartsInvestmentRef.value);
  // 设置无数据时的显示效果
  myChart.setOption({
    noDataLoadingOption: {
      text: '暂无数据',
      textColor: '#000',
      effect: 'bubble', // 可选为：'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
      effectOption: {
        effect: {
          n: 0 // 不显示泡泡个数
        }
      },
    },
    series: []
  });
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'line',
      },
    ],
  };
  myChart.setOption(option);
  state.myCharts.push(myChart);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      state.myCharts[i].resize();
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
  get_emp_emergency_arm();
  get_history_elec_emgency_plane();
  getdev_info(10000021);
  initChartsMonitor();
  initChartsMonitor1();
  initChartsMonitorall5min();
  initChartsMonitor3();
  initChartsMonitor4();
  initChartsMonitoryichang();
  // 获取公司数据
  fetchData();
  updateChartDatayichang();
  get_problem();
  // initChartsCenterOne();
  // initChartsSevenDays();
  // initChartsWarning();
  // initChartsInvestment();
  // initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
  initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
    () => isTagsViewCurrenFull.value,
    () => {
      initEchartsResizeFun();
    }
);
const formatter = (row, column) => {
  return row.address;
}
//触发函数
const get_emp_emergency_arm = async () => {
  const respone = await axios.get("http://106.53.97.117:3060/EmergencyAlert/EmergencyAlert");
  state.emengency_state = respone.data.data
}
//触发获取当前的计划测试案例
const get_history_elec_emgency_plane = async () => {
  const respone = await axios.get(state.baseurl + ":2088/sql?sql=select * from elec_plan_start")
  for (const item of respone.data.data) {
    state.emengencyoptions.push({
      value: item.start_time + " " + item.plan_name,
      lable: item.plan_name + item.start_time,
      key: item.id
    })
  }
}

//触发选择项
const get_emergency_info = (e: any) => {
  state.empselect_emgency = e;
}
const start_emgency = async () => {
//  请求该测试的接口 加日期
  let str = state.empselect_emgency.split(" ")
  str.splice(2);
  let start_timestr = str.join(" ");
  var start_time = new Date(start_timestr);
  start_time.setMinutes(start_time.getMinutes() + 5); // Add 5 minutes
// 将日期转回字符串格式，注意需要+1因为JavaScript的月份是0-11
  var year = start_time.getFullYear();
  var month = ("0" + (start_time.getMonth() + 1)).slice(-2); // slice是为了保证两位数
  var day = ("0" + start_time.getDate()).slice(-2);
  var hour = ("0" + start_time.getHours()).slice(-2);
  var minute = ("0" + start_time.getMinutes()).slice(-2);
  var second = ("0" + start_time.getSeconds()).slice(-2);

  let end_timestr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  console.log(start_timestr)
  console.log(end_timestr)
  // const respone = await axios.get(state.baseurl+`:3060/EmergencyAlert/EmergencyAlertstream?start_time=${start_timestr}&end_time=${end_timestr}`)
  const respone = await axios.get(`http://106.53.97.117:3060/EmergencyAlert/EmergencyAlertstream?start_time=${start_timestr}&end_time=${end_timestr}`)
  state.empselect_emgency_log = respone.data
  let count = respone.data.reduce((acc, cur) => {
    cur.result.forEach(item => {
      let name = item.ent_name;
      if (!(name in acc)) {
        acc[name] = {}; // 初始化为一个空对象
      }

      acc[name]['measure'] = item.measure;
      acc[name]['ent_name'] = item.ent_name;
      acc[name]['warn_time'] = item.warn_time;
      acc[name]['county_name'] = item.county_name;
      acc[name]['ent_id'] = item.ent_id;
      if ('time' in acc[name]) {
        acc[name]['time'] += 5;
      } else {
        acc[name]['time'] = 5;
      }
    });
    return acc;
  }, {});

  console.log(respone.data)
  console.log(count)
  // 遍历上一步统计得到的对象，并将其转换为指定格式
  let resul_dict = []
  for (let name in count) {
    resul_dict.push({
      "delay_time": count[name]['time'],
      "ent_name": count[name]['ent_name'],
      "county_name": count[name]['county_name'],
      "warn_time": count[name]['warn_time'],
      "ent_id": count[name]['ent_id'],
      "measure": count[name]['measure']
    });
  }
  state.tableData = resul_dict;

}

</script>

<style scoped lang="scss">
@import './chart.scss';
</style>
